<!--  -->
<template>
  <div class="content">
    <el-card class="box-card card_left">
      <!-- <el-input placeholder="搜索" suffix-icon="el-icon-search" v-model="search" size="small"></el-input> -->
      <el-tree
        :data="treedata"
        :props="defaultProps"
        @node-click="handleNodeClick"
        node-key="id"
        :default-expanded-keys="expandedArr"
        show-checkbox
        @check-change="handleCheckChange"
        :check-on-click-node="true"
        :check-strictly="true"
        :default-checked-keys="checkedKeys"
        ref="tree"
      ></el-tree>
    </el-card>
    <el-card class="box-card card_right">
      <div class="box_one" v-if="type != 'device_700'">
        <el-row :gutter="10">
          <!-- <el-col :span="6">
            <el-input v-model="name" placeholder="请输入..." size="small"></el-input>
          </el-col>
          <el-col :span="6">
            <el-button type="primary" size="small" @click="getSech">查询</el-button>
          </el-col> -->
          <el-col :span="12">
            <div>
              <el-button type="primary" icon="el-icon-plus" size="small" @click="addEquipment" v-if="type == 'own'">新增工作站</el-button>
              <el-button type="primary" icon="el-icon-plus" size="small" @click="addCollector" v-if="type == 'device_500'" style="margin-left: 20px">新增采集器</el-button>
              <el-button type="primary" icon="el-icon-plus" size="small" @click="addSensor" v-if="type == 'device_500' || type == 'device_600'" style="margin-left: 20px">新增传感器</el-button>
            </div>
          </el-col>
        </el-row>
        <div>
          <!--  -->
        </div>
      </div>
      <!-- 工作站表格 -->
      <div v-if="type == 'own'">
        <el-table :data="tableData" :header-cell-style="{ background: '#8595B9', color: '#fff', height: '44px' }" stripe size="small">
          <el-table-column prop="name" label="工作站名称"></el-table-column>
          <el-table-column prop="location" label="位置"></el-table-column>
          <el-table-column prop="code" label="工作站编码"></el-table-column>
          <el-table-column prop="factory" label="厂家"></el-table-column>
          <el-table-column prop="remark" label="备注"></el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-tooltip content="修改">
                <el-button type="text" icon="el-icon-edit-outline" @click="handleEdit(scope.row)"></el-button>
              </el-tooltip>
              <el-tooltip content="删除">
                <el-button type="text" icon="el-icon-delete" style="color: red !important" @click="handleDelete(scope.row)"></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
        </el-table>
        <div class="page">
          <el-pagination background layout="prev, pager, next" :total="total" :page-size="pageSize" :page-count="pageNum" @current-change="changeCurrent"></el-pagination>
        </div>
      </div>
      <!-- 采集器&传感器表格 -->
      <div v-else>
        <sensor-collector :allData="allData" :node="node" ref="sensorCollect" :getTree="getTree" :getStation="getStation" :Typelist="Typelist"></sensor-collector>
      </div>
    </el-card>
    <!-- 新增，修改工作站弹框 -->
    <vx-popup :title="stationTitle" width="680px" @close="closePopup" :active.sync="addFormVisible" @confirmPopup="submitForm" @cancelPopup="closePopup">
      <el-form :model="addRuleForm" :rules="addRules" ref="addRefRuleForm" label-width="110px" class="demo-ruleForm">
        <el-form-item label="工作站名称：" prop="name">
          <el-input size="small" v-model="addRuleForm.name" placeholder="请输入工作站名称"></el-input>
        </el-form-item>
        <el-form-item label="工作站编码：" prop="code">
          <el-input size="small" v-model="addRuleForm.code" placeholder="请输入工作站编码"></el-input>
        </el-form-item>
        <el-form-item label="工作站位置：">
          <el-input size="small" v-model="addRuleForm.location" placeholder="请输入工作站位置"></el-input>
        </el-form-item>
        <el-form-item label="状态：">
          <el-select v-model="addRuleForm.status" placeholder="请选择活动区域" size="small">
            <el-option label="停用" :value="0"></el-option>
            <el-option label="启用" :value="1"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="工作站厂家：">
          <el-input v-model="addRuleForm.factory" size="small" placeholder="请输入工作站厂家"></el-input>
        </el-form-item>
        <el-form-item label="工作站备注：">
          <el-input size="small" v-model="addRuleForm.remark" placeholder="请输入备注 500字以内" type="textarea" :rows="3" maxlength="500"></el-input>
        </el-form-item>
      </el-form>
    </vx-popup>
  </div>
</template>

<script>
import sensorCollector from './components/sensorCollector' //采集器和传感器
export default {
  components: {
    sensorCollector,
  },
  data() {
    return {
      total: 0,
      pageSize: 10,
      pageNum: 1,
      checkedKeys: [],
      search: '',
      expandedArr: [],
      name: '',
      treedata: [],
      defaultProps: {
        children: 'children',
        label: 'name',
      },
      tableData: [],
      senCollDate: [],
      allData: [],
      type: '',
      node: { type: '' },
      bridgeId: '',
      addFormVisible: false,
      addCollectFormVisible: false,
      stationTitle: '',
      collectTitle: '',
      //新增工作站表格
      addRuleForm: {
        name: '',
        location: '',
        code: '',
        status: '',
        factory: '',
        remark: '',
        ownId: '',
      },
      //   验证规则
      addRules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur' },
        ],
        code: [
          { required: true, message: '请输入编码', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
      },
      //新增采集器表格
      collectForm: {
        name: '',
        status: '',
        deviceType: '',
        code: '',
        location: '',
        deviceRate: '',
        communicateType: '',
        address: '',
        measurePointId: '',
        monitorDeviceType: '',
        remark: '',
        picUrl: '',
        id: '',
        ownId: '',
        pId: '',
      },
      collectRules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' },
          { min: 3, max: 10, message: '长度在 3 到 10个字符', trigger: 'blur' },
        ],
        code: [
          { required: true, message: '请输入编码', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' },
        ],
      },
      Typelist: [],
    }
  },
  created() {
    this.getTree()
    this.getStation()
    // this.getTypelist()
  },
  watch: {
    '$route.query': {
      handler(val, old) {
        if (val.id) {
          this.expandedArr = [val.id]
          this.$api.bridge.BridgesTree().then((res) => {
            if (res.data.success) {
              this.treedata = res.data.data
              this.treedata.forEach((item) => {
                if (item.id == val.id) {
                  this.node = item
                  this.type = 'own'
                  this.getStation()
                }
              })
            }
          })
        }
      },
      immediate: true,
    },
  },
  mounted() {},
  methods: {
    // 点击树
    handleCheckChange(data, checked, child) {
      if (checked === true) {
        this.checkedKeys = [data.id]
        this.$refs['tree'].setCheckedKeys([data.id])
        this.pageNum = 1
        this.type = data.type
        this.node = data
        this.getStation()
      }
    },
    handleNodeClick(data, node) {
      this.checkedKeys = [data.id]
      this.$refs['tree'].setCheckedKeys([data.id])
      this.pageNum = 1
      this.type = data.type
      this.node = data
      this.getStation()
    },
    //采集器下级设备
    getCollectChildren() {
      this.$api.bridge.getCollectChildren({ id: this.node.id, pageSize: this.pageSize, pageNum: this.pageNum }).then((res) => {
        // console.log(res.data.data,'3333333')
        if (res.data.success) this.allData = res.data.data[0]
        this.total = res.data.data[0].length
      })
    },
    //新增采集器
    addCollector() {
      this.$refs.sensorCollect.addCollector()
    },
    //新增传感器
    addSensor() {
      this.$refs.sensorCollect.openSensor()
    },
    editStationApi(api, params, type) {
      params.createTime = ''
      params.updateTime = ''
      this.$api.bridge[api](params).then((res) => {
        if (res.data.success) {
          this.$message({
            type: 'success',
            message: type,
          })
          this.addFormVisible = false
          this.getTree()
          this.getStation()
        }
      })
    },
    //新增工作站表单提交
    submitForm() {
      if (this.stationTitle == '新增工作站') {
        this.editStationApi('addWorkstation', this.addRuleForm, '新增成功')
      }
      if (this.stationTitle == '修改工作站') {
        this.editStationApi('editWorkstation', this.addRuleForm, '修改成功')
      }
    },
    closePopup() {
      this.addFormVisible = false
    },
    changeCurrent(val) {
      this.pageNum = val
      this.getStation()
    },
    //查工作站，采集器，传感器
    getStation() {
      // this.getTree()
      if (this.type == '') this.getWorkstation()
      if (this.type == 'own') this.getBridgeWorkStation()
      if (this.type == 'device_500') this.queryAllDevice()
      if (this.type == 'device_600') this.getCollectChildren()
    },

    //查询所有工作站
    getWorkstation() {
      this.$api.bridge.ListWorkstation({ pageSize: this.pageSize, pageNum: this.pageNum }).then((res) => {
        if (res.data.success) this.tableData = res.data.data[0]
        this.total = res.data.data[0].length
      })
    },
    //查询单个桥梁工作站
    getBridgeWorkStation() {
      this.$api.bridge.getBridgeWorkStation({ ownId: this.node.id, pageSize: this.pageSize, pageNum: this.pageNum }).then((res) => {
        if (res.data.success) this.tableData = res.data.data[0]
        this.total = res.data.data[0].length
      })
    },
    //新增工作站
    addEquipment() {
      this.$refs.addRefRuleForm.resetFields()
      this.cleanForm()
      this.stationTitle = '新增工作站'
      this.addFormVisible = true
      this.addRuleForm.ownId = this.node.id
    },
    //修改工作站
    handleEdit(row) {
      // this.$refs.addRefRuleForm.resetFields();
      this.cleanForm()
      this.stationTitle = '修改工作站'
      this.addFormVisible = true
      this.addRuleForm = row
    },
    //删除工作站
    handleDelete(row) {
      this.sendDelApi('delWorkstation', row.id, 'getStation')
    },
    //查询工作站下设备
    queryAllDevice() {
      this.$api.bridge.queryAllDevice({ id: this.node.id, pageSize: this.pageSize, pageNum: this.pageNum }).then((res) => {
        if (res.data.success) this.allData = res.data.data
        this.total = res.data.data.length
      })
    },
    //表格搜索
    getSech() {},
    getTypelist() {
      this.$api.bridge.getTypelist().then((res) => {
        if (res.data.success) this.Typelist = res.data.data
      })
    },

    getTree() {
      this.$api.bridge.BridgesTree().then((res) => {
        if (res.data.success) this.treedata = res.data.data
      })
    },

    cleanForm() {
      this.addRuleForm = {
        name: '',
        location: '',
        code: '',
        status: '',
        factory: '',
        remark: '',
        ownId: '',
      }
    },

    sendDelApi(apiFn, id, listFn) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(() => {
          this.$api.bridge[apiFn]({ id }).then((res) => {
            if (res.data.success) {
              this.$message({
                type: 'success',
                message: '删除成功',
              })
              this[listFn]()
            }
          })
          callback()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除',
          })
        })
    },
  },
}
</script>
<style lang='scss' scoped>
.card_left {
  .el-input--small {
    // font-size: 13px;
    margin-bottom: 18px;
  }
  span {
    .mRight6 {
      margin-right: 6px;
    }
    display: block;
    font-size: 16px;
    font-weight: 500;
    color: #327bdc;
    line-height: 30px;
    margin-bottom: 18px;
  }
}
.card_right {
  .el-row {
    margin-bottom: 20px;
    .el-col-12:nth-child(2) {
      text-align: right;
    }
    .el-col-12:nth-child(3) {
      text-align: right;
    }
  }
  /deep/.el-card__body {
    height: 95%;
    position: relative;
  }
  .page {
    margin-top: 20px;
    text-align: center;
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
  }
  .box_two {
    .titletop {
      font-size: 16px;
      color: #327bdc;
      font-weight: 500;
      display: block;
      height: 32px;
      line-height: 32px;
    }
    .tab-wrapper {
      /deep/.el-tabs--top .el-tabs__item.is-top:nth-child(2) {
        padding-left: 20px;
      }
      /deep/.el-tabs--top .el-tabs__item.is-top:nth-child(7) {
        padding-right: 20px;
      }
      /deep/.el-tabs__nav-wrap::after {
        // background-color: none;
        z-index: -1;
      }
      /deep/.el-tabs__item.is-active {
        color: #fff;
        background: rgba(var(--vs-primary), 1) !important;
      }
      /deep/.el-tabs__item {
        height: 30px;
        line-height: 30px;
        margin-right: 20px;
        border-radius: 20px;
        background: #f2f2f2;
      }
      /deep/.el-tabs__item.is-active {
        color: #fff;
      }
      /deep/.el-tabs__active-bar {
        background: none;
      }
    }
  }
}
/deep/.el-select {
  width: 463px;
}
</style>
